<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			require.config({
				paths:{
					echarts:'./js'
				}
			});
			require(
				 [	
                	'echarts',
                	'echarts/chart/line',
		            'echarts/chart/bar',
		            'echarts/chart/scatter',
		            'echarts/chart/k',
		            'echarts/chart/pie',
		            'echarts/chart/radar',
		            'echarts/chart/force',
		            'echarts/chart/chord',
		            'echarts/chart/gauge',
		            'echarts/chart/funnel',
		            'echarts/chart/eventRiver',
		            'echarts/chart/venn',
		            'echarts/chart/treemap',
		            'echarts/chart/tree',
		            'echarts/chart/wordCloud',
		            'echarts/chart/heatmap',
		            'echarts/chart/map'
                ],
             	function (ec){
             		 var myChart = ec.init(document.getElementById('main'));
             		var option = {
						    title : {
						        text: '南丁格尔玫瑰图',
						        subtext: '纯属虚构',
						        x:'center'
						    },
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        x : 'center',
						        y : 'bottom',
						        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            mark : {show: true},
						            dataView : {show: true, readOnly: false},
						            magicType : {
						                show: true, 
						                type: ['pie', 'funnel']
						            },
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    calculable : true,
						    series : [
						        {
						            name:'半径模式',
						            type:'pie',
						            radius : [20, 110],
						            center : ['25%', 200],
						            roseType : 'radius',  //南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
						            width: '40%',       // for funnel
						            max: 40,            // for funnel
						            itemStyle : {   //图形样式
						                normal : { //默认样式
						                    label : {
								//标签，饼图默认显示在外部，离饼图距离由labelLine.length决定，
								//漏斗图默认显示在右侧，离图形距离由labelLine.length决定
								//地图标签不可指定位置，
								//折线图，柱形图，K线图，散点图可指定position见下
						                        show : false
						                    },
						                    labelLine : {
						                        show : false
						                    }
						                },
						                emphasis : {   //强调样式（悬浮时样式）
						                    label : {
						                        show : true
						                    },
						                    labelLine : {  //标签视觉引导线，默认显示
						                        show : true
						                    }
						                }
						            },
						            data:[
						                {value:10, name:'rose1'},
						                {value:5, name:'rose2'},
						                {value:15, name:'rose3'},
						                {value:25, name:'rose4'},
						                {value:20, name:'rose5'},
						                {value:35, name:'rose6'},
						                {value:30, name:'rose7'},
						                {value:40, name:'rose8'}
						            ]
						        },
						        {
						            name:'面积模式',
						            type:'pie',
						            radius : [30, 110],
						            center : ['75%', 200],
						            roseType : 'area',
						            x: '50%',               // for funnel
						            max: 40,                // for funnel
						            sort : 'ascending',     // for funnel
						            data:[
						                {value:10, name:'rose1'},
						                {value:5, name:'rose2'},
						                {value:15, name:'rose3'},
						                {value:25, name:'rose4'},
						                {value:20, name:'rose5'},
						                {value:35, name:'rose6'},
						                {value:30, name:'rose7'},
						                {value:40, name:'rose8'}
						            ]
						        }
						    ]
						};
                    
             			
             		
             		
             	myChart.setOption(option);	
             		
             	}
			);
			
		</script>
		<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
	</body>
</html>
